/**
 * 费用的审批历史
 */
import React  from 'react'
import moment from 'moment'
import { messages, getApprovelHistory } from 'share/common'
import { Icon, Row, Col, Tag, Timeline } from 'antd'
import Condition from 'components/condition'
const { If, Else } = Condition;

import 'styles/my-account/components/approve-history.scss'

class ExpenseApproveHistory extends React.Component{
  constructor(props){
    super(props);
    this.state = {

    }
  }

  render(){
    const { approvalHistory } = this.props;
    return(
      <div className="expense-approve-history">
        <If value={approvalHistory.length > 0}>
          <Tag color="blue-inverse" className="approve-history-tag">{messages('my-account.key116'/*审批历史*/)}</Tag>
        </If>
        <Timeline>
          {approvalHistory.map(item => {
            return (
              <Timeline.Item key={item.id}
                             dot={<Icon type={getApprovelHistory(item.operate).icon}
                                        style={{color: getApprovelHistory(item.operate).color}}/>}>
                <Row>
                  <Col span={5}>{moment(item.createdDate).format('YYYY-MM-DD HH:mm')}</Col>
                  <Col span={4} className="operation-type">{getApprovelHistory(item.operate).text || '-'}</Col>
                  <Col span={5} className="operation-name">
                    <Condition>
                      <If value={Number(item.operate) === 33}> {messages('my-account.key235')/*滴滴出行科技有限公司*/}
                      </If>
                      <Else>
                        {item.operator && (
                          <div>
                            {item.role ? `${item.role} ${<span className="ant-divider"/>} ` : ''}
                            {item.operator.fullName + ' ' + (item.operator.employeeID ? item.operator.employeeID : '')}
                          </div>
                        )}
                      </Else>
                    </Condition>
                  </Col>
                  <Col span={9} className="operation-remark">{item.operateDetail}</Col>
                </Row>
              </Timeline.Item>
            )
          })}
        </Timeline>
      </div>
    )
  }
}

ExpenseApproveHistory.propTypes = {
  approvalHistory: React.PropTypes.array,
};

export default ExpenseApproveHistory;
